<template>
  <h2 class="title">今日待完成任务</h2>
  <ul class="tasks">
    <li class="task-item" v-for="(item, index) in todoArray" :key="index">
      <span class="task-name">{{ item.name }}</span>
      <span class="task-text">{{ item.time }} </span>
      <span class="btns enable-click" @click="finishTask(index)">完成</span>
      <span class="btns enable-click" @click="delTask(index)">删除</span>
    </li>
  </ul>
</template>
<script setup>
import { getCurrentInstance } from "vue";
import { useTodo, useFinished, useKeepTimes } from "@/utils/useData.js";

const { proxy } = getCurrentInstance();
const { todoArray, updateTodo } = useTodo(proxy);
const { finishedArray, updateFinished } = useFinished(proxy);
const { keepTimes, updateKeepTimes } = useKeepTimes(proxy);

function finishTask(index) {
  const todos = [...todoArray.value];
  const finisheds = [...finishedArray.value];

  finisheds.push(todos[index]);
  updateFinished(finisheds);

  todos.splice(index, 1);
  updateTodo(todos);

  updateKeepTimes(keepTimes.value + 1);

  proxy.$router.push({
    path: "/finished",
  });
}
function delTask(index) {
  const todos = [...todoArray.value];
  todos.splice(index, 1);
  updateTodo(todos);
}
</script>
<style lang="less" scoped src="@/styles/tasks.less"></style>
<style lang="less" scoped>
.title {
  margin-bottom: 20px;
}

.task-name {
  display: inline-block;
  min-width: 80px;
}
.btns {
  color: #03a9f4;
  cursor: pointer;
  margin-left: 5px;
}
</style>
